<script setup lang="ts">
import { Button, Card, CardMeta, TypographyText } from "ant-design-vue";

// 使用解构赋值来获取props
const props = defineProps({
  title: String,
  image: String,
  desc: String,
  partner: String,
  url: String,
})

const gotoAgent = () => {
  window.open(props.url, '_blank')
}
</script>

<template>
  <Card hoverable>
    <div class="root" @click="gotoAgent">
      <img :src="image" alt="cover" class="image">
      <div class="flex-1 flex-col">
        <CardMeta :title="title" :description="desc" />
        <div class="bottom">
          <TypographyText>合作伙伴：{{ partner }}</TypographyText>
          <Button
            type="primary"
            size="small"
            style="background-color: #e6f0ff; color: #4b69f4; border-color: #e6f0ff"
          >
            立即使用
          </Button>
        </div>
      </div>
    </div>
  </Card>
</template>

<style scoped>
.root{
  display: flex;
  gap: 6px;
  font-family: PingFangSC-regular;
}

.root > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bottom {
  display: flex;
  justify-content: space-between;
}

.image {
  width: 10rem;
  height: 8rem;
}
</style>
